import React, { Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import moment from 'moment';

import { getAddressNameByCode } from '@/utils/utils';
import PageHeader from '@/components/PageHeader';

import {
  Card,
  Table,
  Row,
  Col,
  Descriptions,
} from 'antd';
import { FileImageOutlined } from '@ant-design/icons';

const { Item } = Descriptions;
interface DetailProps {
  dispatch: Dispatch<any>;
  match: { params: { fid: number } };
  location: { query: any };
  loading: boolean;
  franchisee: any;
}

@connect(({ partnerFranchiseeDetail, loading }: any) => ({
  franchisee: partnerFranchiseeDetail,
  loading: loading.effects['partnerFranchiseeDetail/fetch'],
}))

class FranchiseeDetail extends React.Component<DetailProps> {
  columns = [
    {
      title: '社区名称',
      dataIndex: 'name',
    },
    {
      title: '物业',
      dataIndex: 'address',
    },
    {
      title: '地区',
      dataIndex: 'parea_code',
      render: (text: any, record: any) => (
        <div>
          {getAddressNameByCode({
            pareaCode: text,
            caredCode: record.carea_code,
            dareaCode: record.darea_code,
          })}
        </div>
      ),
    },
  ];

  componentDidMount() {
    const { location: { query: { id } } } = this.props;
    this.fetchDetailInfo(id);
  }

  componentDidUpdate(prevProps: DetailProps) {
    const { location: { query: { id } } } = this.props;
    if (prevProps.location.query.id !== id) {
      this.fetchDetailInfo(id);
    }
  }

  fetchDetailInfo = (id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'partnerFranchiseeDetail/fetch',
      payload: { id },
    });
  }

  render() {
    const { franchisee = {}, loading } = this.props;

    return (
      <Fragment>
        <PageHeader />

        <Card
          bordered={false}
          title="基本信息"
          className="paddingB10"
        >
          <Descriptions bordered size="small">
            <Item label="父级组织">{franchisee.parent && franchisee.parent.name}</Item>
            <Item label="加盟级别">{franchisee.level}级加盟商</Item>
            <Item label="加盟起始周期">
              {moment(franchisee.start_time).format('YYYY-MM-DD ')}
              至
              {moment(franchisee.end_time).format(' YYYY-MM-DD')}
            </Item>
            <Item label="商户名称">{franchisee.name}</Item>
            <Item label="商户地址">{franchisee.address}</Item>
            <Item label="商品证件类型">
              {
                franchisee.file_link_list && franchisee.file_link_list.length
                && (
                  <a href={franchisee.file_link_list[0]} target="_Blank" rel="noopener noreferrer">
                    <FileImageOutlined style={{ fontSize: 16 }} />
                    点击预览合同
                  </a>
                )
              }
            </Item>
            <Item label="　联系人">{franchisee.contact}</Item>
            <Item label="手机号码">{franchisee.phone}</Item>
          </Descriptions>
        </Card>

        <Card
          bordered={false}
          title="账户设置"
          className="paddingB30"
        >
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col md={10} sm={24}>
              <div className="dottedBox">
                <div className="subtitle marginB12">提现账户</div>
                <div>
                  <span style={{ color: '#666' }}>延期提醒设置：</span>
                  {franchisee.is_postpone_withdraw === 1 ? '开启' : '关闭'}
                </div>
                <div style={{ marginTop: 8 }}>
                  <span style={{ color: '#666' }}>延期提现日期：</span>
                  {franchisee.is_postpone_withdraw === 1 && franchisee.can_withdraw_date}
                  {franchisee.is_postpone_withdraw !== 1 && '--'}
                </div>
                <div style={{ marginTop: 8 }}>
                  <span style={{ color: '#666' }}>单日提现上限金额：</span>
                  {franchisee.day_max_quota / 100}元
                </div>
              </div>
            </Col>
            <Col md={10} sm={24}>
              <div className="dottedBox">
                <div className="subtitle marginB12">充值账户</div>
                <div>
                  <span style={{ color: '#666' }}>已设余额报警：</span>
                  {franchisee.consume_warn_amount}元
                </div>
              </div>
            </Col>
          </Row>
        </Card>
        <Card title="加盟区域" bordered={false} className="paddingB30">
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col md={10} sm={24}>
              {(franchisee.region_list || []).map((region: any, index: number) => (
                <div
                  key={index}
                  className="dottedBox"
                  style={{
                    color: '#333',
                    marginBottom:
                index === franchisee.region_list.length - 1 ? '0px' : '20px',
                  }}
                >
                  <div>
                    <span style={{ color: '#666' }}>加盟性质：</span>
                    {region.is_exclusive === 1 ? '独家' : '非独家'}
                  </div>
                  <div>
                    <span style={{ color: '#666' }}>加盟区域：</span>
                    {region.parea_name}{region.carea_name}{region.darea_name}
                  </div>
                </div>
              ))}
            </Col>
          </Row>
        </Card>

        <Card
          bordered={false}
          title="社区列表"
        >
          <Table
            rowKey="id"
            className="tableList statementTable"
            pagination={false}
            loading={loading}
            dataSource={franchisee.garden_list || []}
            columns={this.columns}
          />
        </Card>
      </Fragment>
    );
  }
}

export default FranchiseeDetail;
